<template>
  <div id="sign" v-if="show">
    <div class="bg" @click="showModal"></div>
    <div class="modal">
      <div class="modal-btns">
        <div class="modal-single" v-for="(item, index) in modal" :key="index">
          <div class="modal-text">{{ item.day }}</div>
          <div class="modal-btn" :class="item.show ? 'selected' : ''">
            <div class="gift-icon">
              <img src="../assets/imgs/yinggb.png" alt="" />
            </div>
            <div class="gift-text">2个荧光棒</div>
          </div>
        </div>
      </div>
      <div class="sign-btn" @click="sign" v-if="btnShow">立即签到</div>
      <div class="sign-btn finish" v-else @click="finishSign">已签到</div>
      <div class="clear-btn" @click="showModal">
        <img src="../assets/imgs/cha.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "sign",
  data() {
    return {
      btnShow: true,
      show: false,
      modal: [
        { day: "周一" },
        { day: "周二" },
        { day: "周三" },
        { day: "周四" },
        { day: "周五" },
        { day: "周六" },
        { day: "周日" },
      ],
    };
  },
  created() {
    this.$set(this.modal, "show", false);
    if (this.isToken()) {
      this.init();
    }
  },
  mounted() {
    this.getRem(1920, 100);
  },
  methods: {
    //查询签到状态
    init() {
      this.$post(`/laiwen/signin/frontend/list1`, {}).then((res) => {
        //渲染签到模态窗
        for (let i of res.list.keys()) {
          if (res.list[i].week == res.thisday) {
            this.btnShow = false;
          }
          //week判断
          this.modal[res.list[i].week].show = true;
        }
      });
    },
    showModal() {
      if (!this.tourist()) {
        return true;
      }
      this.show = !this.show;
    },
    //签到
    sign() {
      this.$post(`/laiwen/signin/frontend/save`, {}).then((res) => {
        this.init();
        this.$message({
          message: "签到成功了哦",
          type: "success",
        });
      });
    },
    finishSign() {
      alert("已经签到过了哦不可以再点了");
    },
  },
};
</script>

<style scoped>
#sign {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.bg {
  width: 100%;
  height: 100%;
  opacity: 0.25;
  background: black;
  position: absolute;
  z-index: -1;
}
.selected {
  background: #ffd52f !important;
  color: #ffffff !important;
  border: 0.01rem solid transparent !important;
}
.modal {
  width: 5rem;
  height: 5.98rem;
  background-image: url("../assets/imgs/sign.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  position: relative;
  flex-direction: column;
  z-index: 9999;
  margin-top: 1.34rem;
}
.modal-btns {
  width: 4.36rem;
  display: flex;
  justify-content: space-between;
  margin-top: 2.62rem;
  flex-wrap: wrap;
}
.modal-btns::after {
  content: "";
  width: 0.88rem;
}
img{
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}
.finish {
  background: #999999 !important;
  color: #ffffff !important;
}
.modal .modal-single {
  width: 0.88rem;
  height: 1.06rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 0.12rem;
}
image {
  width: 100%;
  display: block;
  height: 100%;
}
.modal-text {
  height: 0.2rem;
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.2rem;
  color: rgba(9, 9, 9, 1);
  opacity: 1;
}
.modal-btn {
  width: 0.88rem;
  height: 0.78rem;
  background: rgba(238, 238, 238, 1);
  opacity: 1;
  border-radius: 0.05rem;
  margin-top: 0.08rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgba(153, 153, 153, 1);
  cursor: pointer;
}
.modal-btn .gift-icon {
  width: 0.31rem;
  height: 0.31rem;
  margin-top: 0.13rem;
}
.gift-text {
  margin-top: 0.07rem;
  height: 0.2rem;
  font-size: 0.14rem;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.2rem;
  opacity: 1;
}
.sign-btn {
  width: 3.3rem;
  height: 0.48rem;
  background: rgba(255, 213, 47, 1);
  opacity: 1;
  border-radius: 0.4rem;
  font-size: 0.22rem;
  font-family: PingFang SC;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  opacity: 1;
  cursor: pointer;
  margin-top: 0.2rem;
}
.clear-btn {
  width: 0.24rem;
  height: 0.24rem;
  border-radius: 50%;
  opacity: 1;
  position: absolute;
  right: -0.24rem;
  top: 0.18rem;
  cursor: pointer;
}
</style>
